<template>
    <div>
        <h1>课程表</h1>
        <el-button type="primary" icon="el-icon-arrow-left" @click="lastWeek">上周</el-button>
        <el-button type="primary" icon="el-icon-arrow-right" @click="nextWeek">下周</el-button>
        <el-table
                :data="scheduleData"
                stripe
                :row-style="{height:'100px'}"
                style="width: 100%">
            <el-table-column width="80" label="班级\周" fixed="left" prop="classesName" align="center"></el-table-column>
            <el-table-column label="日期" align="center" v-for="(v,i) in date" :key="v.getDate()+'-'+i">
                <template slot="header" slot-scope="scope">
                    <div class="tabletitle-timeline">
                        {{v.getFullYear() + "-" + (v.getMonth()+1) + "-" + v.getDate()}} 周{{i+1}}
                    </div>
                </template>
                <template slot-scope="scope">
                    <div>
                        <div v-if="scope.row.scheduleList[i]">
                            {{scope.row.scheduleList[i].course.courseName}}
                            {{scope.row.scheduleList[i].number}}
                            <br/>
                            {{scope.row.scheduleList[i].teacher.name}}
                            <br/>
                            {{scope.row.scheduleList[i].classroom.name}}
                        </div>
                        <div v-else-if="i==5">
                            <i class="el-icon-coffee-cup"></i>
                        </div>
                        <div v-else-if="i==6 && scope.row.scheduleList[5]">
                            <i class="el-icon-coffee-cup"></i>
                        </div>
                        <div v-else>
                            <i class="el-icon-s-platform"></i>
                        </div>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    import dayjs from 'dayjs';

    export default {
        name: "WebScheduleView",
        data(){
            return{
                classes: [],
                teachers: [],
                courses: [],
                classrooms: [],
                schedules: [],
                date: [],
                scheduleData: [],
                weekdate: '',
                //dialogTableVisible: false,
                //dialogFormVisible: false,
                //form: {},
                //formLabelWidth: '80px',
                valuedate:null,
                startDate:null,
                endDate:null,
            }

        },
        created() {
            this.getdate();
            //this.handleInitClassesAndTeacherAndCourse();
            this.handleInitSchedule();

        },
        methods:{
            handleInitSchedule(){
                this.$axios.post("http://localhost:8080/web/schedule/weeklist",'date='+this.weekdate).then(response => {
                    this.scheduleData = response.data.data;
                    //console.log(this.scheduleData);
                });
            },
            /*handleInitClassesAndTeacherAndCourse(){
                this.$axios.get("http://localhost:8080/manage/classes/list").then(response => {
                    this.classes = response.data.data;
                });
                this.$axios.get("http://localhost:8080/manage/teacher/list").then(response => {
                    this.teachers = response.data.data;
                });
                this.$axios.get("http://localhost:8080/manage/course/list").then(response => {
                    this.courses = response.data.data;
                });
                this.$axios.get("http://localhost:8080/manage/classroom/list").then(response => {
                    this.classrooms = response.data.data;
                });
                this.$axios.get("http://localhost:8080/manage/schedule/list").then(response => {
                    this.schedules = response.data.data;
                    //console.log(this.schedules);
                });
            },*/
            getdate(){
                var now = new Date();
                var nowTime = now.getTime();
                var day = now.getDay();
                var oneDayTime = 24*60*60*1000;
                //显示周一
                var MondayTime = nowTime - (day-1)*oneDayTime;
                var date = new Date(MondayTime);
                let format = date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDate();
                this.weekdate=format;
                for(var i=0;i<7;i++){
                    this.date.push(date);
                    //date=date.setDate(date.getDate()+1);
                    date=new Date(date.getTime()+24*60*60*1000);
                }
            },
            /*handlerUpdata(row,i){
                //console.log(row);

                const schdule=row.scheduleList[i];
                this.dialogFormVisible = true;
                this.form={};
                if(schdule){
                    this.form=schdule;
                }
                else {
                    this.form.courseTime=new Date(this.date[i+1]);
                    this.form.classesId=row.id;
                    this.form.id=null;
                }
            },
            handlerDel(id){
                this.$confirm('是否删除该课程?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.axios.get("http://localhost:8080/manage/schedule/delete",{params:{id: id}}).then(response => {
                        if (response.data.code == 200) {
                            this.handleInitSchedule();
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            add(){
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        console.log(this.form);
                        this.$axios.post("http://localhost:8080/manage/schedule/save",this.form).then(response => {
                            if (response.data.code == 200) {
                                this.handleInitSchedule();
                                this.dialogFormVisible = false;
                                this.$message({
                                    type: 'success',
                                    message: '添加成功!'
                                });
                            }
                        });
                    } else {
                        return false;
                    }
                });
            },
            //根据输入框选择的时间获取这一周起始和终止时间
            changeDate() {
                this.startDate =dayjs(this.valuedate).startOf('week').format('YYYY-MM-DD');// startOf 获取周起始
                var dateTime=new Date(this.startDate);
                dateTime=dateTime.setDate(dateTime.getDate()+1);
                dateTime=new Date(dateTime);
                var y = dateTime.getFullYear();
                var m = dateTime.getMonth() + 1;
                m = m < 10 ? ('0' + m) : m;
                var d = dateTime.getDate();
                d = d < 10 ? ('0' + d) : d;
                let time = y + '-' + m + '-' + d;
                this.startDate=time;
                this.endDate =dayjs(this.valuedate).endOf('week').format('YYYY-MM-DD');
                dateTime=new Date(this.endDate);
                dateTime=dateTime.setDate(dateTime.getDate()+1);
                dateTime=new Date(dateTime);
                y = dateTime.getFullYear();
                m = dateTime.getMonth() + 1;
                m = m < 10 ? ('0' + m) : m;
                d = dateTime.getDate();
                d = d < 10 ? ('0' + d) : d;
                time = y + '-' + m + '-' + d;
                this.endDate=time;
            },
            auto(){
                this.$axios.post("http://localhost:8080/manage/auto/autolist",'date='+this.startDate).then(response => {
                    if(response.data.code == 200){
                        this.handleInitSchedule();
                        this.$message({
                            message: '排课成功',
                            type: 'success'
                        });
                    }
                    else if(response.data.code == 20002){
                        this.$message({
                            message: '课表已发布，不能再使用自动排课，如需修改，请手动修改',
                            type: 'warning'
                        });
                    }
                    else {
                        this.$message({
                            message: '排课出了一点小问题，可以再试一下，或者检查一下排课计划',
                            type: 'warning'
                        });
                    }
                });
            },*/
            lastWeek(){
                var now = new Date();
                if(this.date[0]<=now){
                    this.$message('到头啦，没有上周课表');
                    return;
                }
                else {
                    var d =this.date[0];
                    let date=new Date(d.getTime()-7*24*60*60*1000);
                    let format = date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDate();
                    this.weekdate=format;
                    this.handleInitSchedule();
                    this.date=[];
                    for(var i=0;i<7;i++){
                        this.date.push(date);
                        date=new Date(date.getTime()+24*60*60*1000);
                    }
                }
            },
            nextWeek(){
                var d =this.date[6];
                let date=new Date(d.getTime()+24*60*60*1000);
                let format = date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDate();
                this.weekdate=format;
                this.$axios.post("http://localhost:8080/web/schedule/weeklist",'date='+this.weekdate).then(response => {
                    //console.log(response);
                    if(response.data.code == 20001){
                        this.$message('下周课表还未发布');
                        return;
                    }
                    this.date=[];
                    for(var i=0;i<7;i++){
                        this.date.push(date);
                        //this.date[i]=date;
                        date=new Date(date.getTime()+24*60*60*1000);
                    }
                    this.scheduleData = response.data.data;
                    //console.log(this.date);
                });
            },
            publish(){
                this.$confirm('课表发布后将不能对本周课表进行自动排课，是否确定发布？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var d =this.date[0];
                    let format = d.getFullYear() + "-" + (d.getMonth()+1) + "-" + d.getDate();
                    this.$axios.post("http://localhost:8080/manage/schedule/publish",'date='+format).then(response => {
                        if(response.data.code == 20001){
                            this.$message({
                                message: '上周课表还未发布，请先发布上周课表',
                                type: 'warning'
                            });
                        }
                        else {
                            this.$message({
                                message: '发布成功',
                                type: 'success'
                            });

                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消发布'
                    });
                });
            }
        }
    }
</script>

<style scoped>

</style>